<template>
	<view class="item">
		<!-- 用户信息显示区域-->
		<view class="userInfo">
			<view class="userImg">
				<image src="../../static/logo/touxiang.jpg"></image>
			</view>
			<view class="name">
				<view class="username">
					<text class="text1">无聊的饭团</text>
				</view>
				<view class="wechatnum">
					<view class="right">
						<image src="../../static/logo/chevron-right.png" mode=""></image>
					</view>
					<text class="text2" style="font-size: 25upx;font-weight: 500;">微信号: 669</text>
				</view>
				<view class="status">
					<text style="font-size: 28upx;font-weight: bold;margin-left: 8upx;">+ 状态</text>
				</view>
			</view>
		</view>
			<uni-list style="margin-top: 10upx;border-top: 30upx solid #c5c5c5;border-bottom: 30upx solid #c5c5c5;">
				<uni-list-item title="添加好友" link to="/pages/friend/login"
						 thumb="../../static/添加好友.png"/>
			</uni-list>
		    <uni-list-item link :to="itmes.src" v-for="(itmes, index) in list" :title="itmes.listName" :thumb="itmes.imge" style="border-bottom: 4upx solid #BBBBBB;"></uni-list-item>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{listName:"建议反馈",
					src:"/pages/mine/retroaction",imge:"../../static/建议反馈.png"},
					{listName:"帮助中心",
				src:"/pages/help/help",imge:"../../static/帮助中心.png"},
				
					{listName:"支付",
				src:"",imge:"../../static/logo/pay.png"},
					{listName:"收藏",
				src:"",imge:"../../static/logo/heart.png"},
					{listName:"卡包",
				src:"",imge:"../../static/logo/kb.png"}
				]
				}
		},
		methods: {
			 goto(url) {
			                uni.navigateTo({
			                    url:url
			                })
			            }
		}
	}
</script>

<style scoped>
	.userInfo{
		display:flex;
		background-color: white;
		margin: 26upx;
		
	}
	.userImg{
		border: 5upx solid #cca8b5;
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
	}
	.userImg image{
		height: 120upx;
		width: 120upx;
	}
	.name{
		padding-left: 18upx;
	}
	.text1{
		font-size: 40upx;
		font-weight: bold;
		color: #555500;
		
	}
	.wechatnum{
		display:block;
		margin-top: 5upx;
		font-size: xx-small;
		font-weight:lighter;
	}
	.right image{
		height: 40upx;
		width: 40upx;
		position: absolute;
		right: 4.5%;
	}
	.status{
		border: 4upx solid #55aa7f;
		background-color: #c9e1db;
		color: #55557f;
		border-radius: 10upx;
		margin-top: 10upx;
		font-size:xx-small;
		height:50upx;
		width: 110upx;
	}
.item {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: space-between;
	line-height: 48rpx;
	background-color: #FFFFFF;
	font-style:inherit;
}
</style>
